<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <link rel="stylesheet" type="text/css" href="/static/css/base.css">
    <link rel="stylesheet" type="text/css" href="/static/easyui/uimaker/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/easyui/uimaker/icon.css">
    <link rel="stylesheet" type="text/css" href="/static/css/edit.css">
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">

    <script type="text/javascript" src="/static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/easyui/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/js/calendar.js"></script>
    <script type="text/javascript" src="/static/webuploader/webuploader.js"></script>

    <script type="text/javascript" src="/static/vue/vue.js"></script>
    <link href="/static/elementUI/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/elementUI/index.js"></script>
</head>
<body>
<div class="container" id="container">

    <div class="content">
        <div title="新增" data-options="closable:false" class="basic-info">
            <div class="column"><span class="current">添加</span></div>
            <form id="ff">
                <table class="kv-table">
                    <tbody>
                    <tr>
                        <td class="kv-label">任务名称</td>
                        <td class="kv-content">
                            <input type="text" name="name" id="name" class="easyui-validatebox"
                                   data-options="validType:'name'">
                        </td>
                        <td class="kv-label">相关人物</td>
                        <td class="kv-content">
                            <el-tag
                                    :key="tag"
                                    v-for="tag in dynamicTags"
                                    closable
                                    :disable-transitions="false"
                                    size="mini"
                                    @close="handleClose(tag)">
                                {{tag}}
                            </el-tag>
                            <el-input
                                    class="input-new-tag"
                                    v-if="inputVisible"
                                    v-model="inputValue"
                                    ref="saveTagInput"
                                    size="small"
                                    @keyup.enter.native="handleInputConfirm"
                                    @blur="handleInputConfirm"
                            >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="mini" @click="showInput">添加</el-button>
                        </td>
                    </tr>
                    <tr>
                        <td class="kv-label">类型</td>
                        <td class="kv-content">
                            <select name="type" id="type">
                            </select>
                        </td>
                        <td class="kv-label">描述</td>
                        <td class="kv-content"><input type="text" name="description" id="description"
                                                      class="easyui-validatebox" data-options="validType:'description'">
                        </td>
                    </tr>
                    <tr>
                        <td class="kv-label">进度</td>
                        <td class="kv-content">
                            <input type="text" name="rate" id="rate"
                                   class="easyui-validatebox" data-options="validType:'rate'">
                        </td>
                        </td>
                        <td class="kv-label">次数</td>
                        <td class="kv-content">
                            <input type="text" name="numberTimes" id="numberTimes"
                                   class="easyui-validatebox" data-options="validType:'numberTimes'">
                        </td>
                    </tr>
                    <tr>
                        <td class="kv-label">备注</td>
                        <td class="kv-content">
                            <input type="text" name="remark" id="remark" class="easyui-validatebox"
                                   data-options="validType:'remark'">
                        </td>
                        <td class="kv-label">优先级</td>
                        <td class="kv-content">
                            <select name="priorityLevel" id="priorityLevel">
                                <option value="1">1级</option>
                                <option value="2">2级</option>
                                <option value="3">3级</option>
                                <option value="4">4级</option>
                                <option value="5">5级</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="kv-label">用户名</td>
                        <td class="kv-content">
                            <input type="text" name="username" id="username" class="easyui-validatebox"
                                   data-options="validType:'username'">
                        </td>

                        <td class="kv-label">封面照片</td>
                        <td class="kv-content">
                            <img id="chooseLegalIdCardPreview" alt="" src=""/>
                            <div id="chooseLegalIdCard">选择文件</div>
                            <input type="hidden" name="pic" id="pic"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div class="btn-selection">
            <a href="javascript:void(0);" class="easyui-linkbutton save-btn" data-options="selected:true">保存</a>
            <a href="javascript:void(0);" class="easyui-linkbutton reset-btn" data-options="selected:true">重置</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#container",
        data: {
            dynamicTags: [],
            inputVisible: false,
            inputValue: ''
        },
        methods: {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        },
        mounted() {
        }
    });

    $(function () {
        // 请求下拉条
        $.get("/home/dict/getByType?dictTypeEnum=PROGRESS", {}, function (data) {
            let type = $("#type");
            $.each(data, function (index, val) {
                type.append("<option value='" + val.name + "'>" + val.description + "</option>");
            })
        }, "json")

        /* 点击保存 */
        $(".save-btn").on("click", function () {
            add();
        })
        /* 点击重置 */
        $(".reset-btn").on("click", function () {
            $("#ff").form('clear');
        })
    });

    function add() {
        var name = $("#name").val();
        var user = app.$data.dynamicTags;
        var type = $("#type").val();
        var description = $("#description").val();
        var rate = $("#rate").val();
        var numberTimes = $("#numberTimes").val();
        var remark = $("#remark").val();
        var priorityLevel = $("#priorityLevel").val();
        var username = $("#username").val();
        var pic = $("#pic").val();

        $.messager.confirm({
            title: "提示",
            msg: "确认添加？",
            width: 300,
            height: 160,
            fn: function (data) {
                if (data) {
                    $.ajax({
                        url: "/home/progress/add",
                        type: "POST",
                        dataType: "json",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: JSON.stringify({
                            "name": name,
                            "user": user,
                            "type": type,
                            "description": description,
                            "rate": rate,
                            "numberTimes": numberTimes,
                            "remark": remark,
                            "priorityLevel": priorityLevel,
                            "username": username,
                            "pic": pic
                        }),
                        success: function (response) {
                            parent.$.messager.alert("提示", response.message, "info");
                            if (response.data) {
                                parent.$("#topWindow").window('close');
                            }
                        }
                    })
                }
            }
        })
    }

    //重置
    $("#reset").on("click", function () {
        $("#addForm").form("reset")
    })
    // 文件上传
    $(function () {
        var chooseLegalIdCardUploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/static/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/home/file/uploadOneFile',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#chooseLegalIdCard',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        chooseLegalIdCardUploader.on('fileQueued', function (file) {
            chooseLegalIdCardUploader.makeThumb(file, function (error, src) {
                if (error) {
                    $("#chooseLegalIdCardPreview").replaceWith('<span>不能预览</span>');
                    return;
                }
                $("#chooseLegalIdCardPreview").attr('src', src);
            }, 200, 100);
        });
        //文件上传成功接受回调信息
        chooseLegalIdCardUploader.on('uploadSuccess', function (file, response) {
            $("#pic").val(response.data);
        });
    })
</script>
</body>
</html>